<template>
    <div>
      <div class="forex_content">
        <div class="forex_border">
          <ul>
            <!-- 在线开户 -->
            <li class="d_jump">
              <!-- Fuction Title -->
              <h1>在线开户申请</h1>
              <!-- Step Images -->
              <img class="StepImgs img-responsive" src="./images/ProcessStep1.png"><!-- Step Introduce -->
              <div class="Reg-Well">[1] 基本资料</div><!-- Estimate time -->
              <div class="col-xs-12">
                <div class="EstTime pull-right">预计完成时间：4分钟</div>
                <div class="clearfix"></div>
              </div><!-- Form -->
              <!--<form>-->
              <input name="__RequestVerificationToken" type="hidden" value="">
              <input id="TempID" name="TempID" type="hidden" value="">
              <div class="form-group"><!-- FirstName -->
                <div class="col-xs-12 col-sm-4"><label for="">姓氏</label><span
                  class="field-validation-valid text-danger WordBreak" data-valmsg-for="Members[0].LastName"
                  data-valmsg-replace="true"></span><input class="form-control" data-val="true"
                                                           data-val-length="文字长度超越字段最大限制" data-val-length-max="50"
                                                           data-val-required="*" id="Members_0__LastName"
                                                           name="Members[0].LastName" type="text" value=""></div>
                <!-- LastName(Surname) -->
                <div class="col-xs-12 col-sm-4"><label for="">名字</label><span
                  class="field-validation-valid text-danger WordBreak" data-valmsg-for="Members[0].FirstName"
                  data-valmsg-replace="true"></span><input class="form-control" data-val="true"
                                                           data-val-length="文字长度超越字段最大限制" data-val-length-max="50"
                                                           data-val-required="*" id="Members_0__FirstName"
                                                           name="Members[0].FirstName" type="text" value=""></div>
                <div class="clearfix"></div><!-- Nationality -->
                <div class="col-xs-10 col-sm-5"><label>国籍</label><span
                  class="field-validation-valid text-danger WordBreak" data-valmsg-for="Members[0].Nationality"
                  data-valmsg-replace="true"></span>
                  <select class="form-control" data-val="true" data-val-required="*"
                          id="Nationality" name="Members[0].Nationality">
                    <option selected="selected" value="">请选择</option>
                    <option value="AF">阿富汗</option>
                    <option value="AL">阿尔巴尼亚</option>
                    <option value="DZ">阿尔及利亚</option>
                    <option value="AD">安道尔</option>
                    <option value="AO">安哥拉</option>
                    <option value="AN">荷属安的列斯群岛</option>
                    <option value="AG">安提瓜</option>
                    <option value="AR">阿根廷</option>
                    <option value="AM">亚美尼亚</option>
                    <option value="AW">阿鲁巴</option>
                    <option value="AU">澳大利亚</option>
                    <option value="AT">奥地利</option>
                    <option value="AZ">阿塞拜疆</option>
                    <option value="BS">巴哈马群岛</option>
                    <option value="BH">巴林</option>
                    <option value="BD">孟加拉国</option>
                    <option value="BB">巴巴多斯</option>
                    <option value="BY">白俄罗斯</option>
                    <option value="BE">比利时</option>
                    <option value="BZ">伯利兹</option>
                    <option value="BJ">贝宁</option>
                    <option value="BM">百慕大</option>
                    <option value="BT">不丹</option>
                    <option value="BO">玻利维亚</option>
                    <option value="BA">波黑</option>
                    <option value="BW">博茨瓦纳</option>
                    <option value="BR">巴西</option>
                    <option value="VG">英属维京群岛</option>
                    <option value="BN">文莱达鲁萨兰国</option>
                    <option value="BG">保加利亚</option>
                    <option value="BF">布基纳法索</option>
                    <option value="KH">柬埔寨</option>
                    <option value="CM">咔麦隆</option>
                    <option value="CA">加拿大</option>
                    <option value="IC">加那利群岛</option>
                    <option value="CV">佛得角</option>
                    <option value="KY">开曼群岛</option>
                    <option value="CF">中非</option>
                    <option value="TD">查德</option>
                    <option value="CL">智利</option>
                    <option value="CN">中国</option>
                    <option value="CO">哥伦比亚</option>
                    <option value="KM">科摩罗</option>
                    <option value="CD">刚果民主共和国</option>
                    <option value="CK">库克群岛</option>
                    <option value="CR">哥斯达黎加</option>
                    <option value="HR">克罗埃西亚</option>
                    <option value="CY">塞浦路斯</option>
                    <option value="CZ">捷克共和国</option>
                    <option value="DK">丹麦</option>
                    <option value="DJ">吉布地</option>
                    <option value="DM">多米尼克</option>
                    <option value="TP">东帝汶</option>
                    <option value="DO">多米尼加共和国</option>
                    <option value="EC">厄瓜多尔</option>
                    <option value="EG">埃及</option>
                    <option value="SV">萨尔瓦多</option>
                    <option value="GQ">赤道几内亚共和国</option>
                    <option value="EE">爱沙尼亚</option>
                    <option value="ET">埃塞俄比亚</option>
                    <option value="FO">法罗群岛</option>
                    <option value="FJ">斐济群岛</option>
                    <option value="FI">芬兰</option>
                    <option value="FR">法国</option>
                    <option value="GF">法属圭亚那</option>
                    <option value="GA">加蓬共和国</option>
                    <option value="GM">冈比亚</option>
                    <option value="GE">乔治亚</option>
                    <option value="DE">德国</option>
                    <option value="GH">加纳</option>
                    <option value="GI">直布罗陀</option>
                    <option value="GR">希腊</option>
                    <option value="GL">格陵兰</option>
                    <option value="GD">格瑞那达国</option>
                    <option value="GP">瓜德罗普</option>
                    <option value="GT">瓜地马拉</option>
                    <option value="GN">几内亚</option>
                    <option value="GY">盖亚那</option>
                    <option value="HT">海地</option>
                    <option value="HN">洪都拉斯</option>
                    <option value="HK">香港</option>
                    <option value="HU">匈牙利</option>
                    <option value="IS">冰岛</option>
                    <option value="IN">印度</option>
                    <option value="ID">印度尼西亚</option>
                    <option value="IR">伊朗</option>
                    <option value="IQ">卢旺达</option>
                    <option value="IE">爱尔兰</option>
                    <option value="IL">以色列</option>
                    <option value="IT">意大利</option>
                    <option value="CI">象牙海岸</option>
                    <option value="JM">牙买加</option>
                    <option value="JP">日本</option>
                    <option value="JO">约旦</option>
                    <option value="KZ">哈萨克斯坦</option>
                    <option value="KE">肯尼亚</option>
                    <option value="KW">科威特</option>
                    <option value="KG">库尔吉斯坦</option>
                    <option value="LA">寮国</option>
                    <option value="LV">拉脱维亚</option>
                    <option value="LB">黎巴嫩</option>
                    <option value="LS">莱索托</option>
                    <option value="LI">列支敦斯登</option>
                    <option value="LT">立陶宛</option>
                    <option value="LU">卢森堡</option>
                    <option value="MO">中国澳门</option>
                    <option value="MK">马其顿王国</option>
                    <option value="MG">马达加斯加</option>
                    <option value="MW">马拉威</option>
                    <option value="MY">马来西亚</option>
                    <option value="MV">马尔代夫</option>
                    <option value="ML">马利共和国</option>
                    <option value="MT">马耳他</option>
                    <option value="MQ">马提尼克岛</option>
                    <option value="MR">毛里塔尼亚</option>
                    <option value="MU">毛里求斯</option>
                    <option value="MX">墨西哥</option>
                    <option value="MD">摩尔多瓦</option>
                    <option value="MC">摩纳哥</option>
                    <option value="MN">蒙古</option>
                    <option value="MA">摩洛哥</option>
                    <option value="MZ">莫桑比克</option>
                    <option value="MM">缅甸</option>
                    <option value="NA">纳米比亚</option>
                    <option value="NR">瑙鲁</option>
                    <option value="NP">尼泊尔</option>
                    <option value="NL">荷兰</option>
                    <option value="NC">新喀里多尼亚</option>
                    <option value="NZ">纽西兰</option>
                    <option value="NI">尼加拉瓜</option>
                    <option value="NE">尼日尔</option>
                    <option value="NG">奈及利亚</option>
                    <option value="NO">挪威</option>
                    <option value="OM">阿曼</option>
                    <option value="PK">巴基斯坦</option>
                    <option value="PS">巴勒斯坦</option>
                    <option value="PA">巴拿马</option>
                    <option value="PG">巴布亚新几内亚</option>
                    <option value="PY">巴拉圭</option>
                    <option value="PE">秘鲁</option>
                    <option value="PH">菲律宾</option>
                    <option value="PL">波兰</option>
                    <option value="PR">波多黎各</option>
                    <option value="PT">葡萄牙</option>
                    <option value="QA">卡塔尔</option>
                    <option value="RE">留尼汪岛</option>
                    <option value="RO">罗马尼亚</option>
                    <option value="RU">俄国</option>
                    <option value="RW">卢旺达</option>
                    <option value="WS">西萨摩亚</option>
                    <option value="SM">圣马力诺共和国</option>
                    <option value="SA">沙特阿拉伯</option>
                    <option value="SN">塞内加尔</option>
                    <option value="YU">塞黑</option>
                    <option value="SC">塞舌尔共和国</option>
                    <option value="SL">塞拉利昂</option>
                    <option value="SG">新加坡</option>
                    <option value="SX">荷属圣马丁</option>
                    <option value="SK">斯洛伐克共和国</option>
                    <option value="SI">斯洛文尼亚</option>
                    <option value="SB">所罗门群岛</option>
                    <option value="SO">索马里民主共和国</option>
                    <option value="ZA">南非</option>
                    <option value="KR">韩国</option>
                    <option value="ES">西班牙</option>
                    <option value="LK">斯里兰卡</option>
                    <option value="KN">圣基茨</option>
                    <option value="LC">圣卢西亚</option>
                    <option value="PM">圣彼得堡</option>
                    <option value="VC">圣文森特</option>
                    <option value="SR">苏里南</option>
                    <option value="SZ">史瓦济兰</option>
                    <option value="SE">瑞典</option>
                    <option value="CH">瑞士</option>
                    <option value="TJ">塔吉克斯坦</option>
                    <option value="PF">大溪地</option>
                    <option value="TW">台湾</option>
                    <option value="TZ">坦桑尼亚</option>
                    <option value="TH">泰国</option>
                    <option value="TG">多哥</option>
                    <option value="TO">汤加</option>
                    <option value="TT">千里达</option>
                    <option value="TN">突尼斯</option>
                    <option value="TR">土耳其</option>
                    <option value="TM">土库曼</option>
                    <option value="UG">乌干达</option>
                    <option value="UA">乌克兰</option>
                    <option value="AE">阿拉伯联合酋长国</option>
                    <option value="GB">英国</option>
                    <option value="US">美国</option>
                    <option value="UY">乌拉圭</option>
                    <option value="UZ">乌兹别克斯坦</option>
                    <option value="VU">瓦努阿图共和国</option>
                    <option value="VA">梵蒂冈</option>
                    <option value="VE">委内瑞拉</option>
                    <option value="VN">越南</option>
                    <option value="YE">也门</option>
                    <option value="ZM">赞比亚</option>
                    <option value="ZW">辛巴威</option>
                  </select></div>
                <div class="clearfix"></div><!-- Email -->
                <div class="col-xs-12 col-sm-7"><label>电子邮箱</label><span
                  class="field-validation-valid text-danger WordBreak" data-valmsg-for="Members[0].Email"
                  data-valmsg-replace="true"></span><input class="form-control" data-val="true"
                                                           data-val-length="文字长度超越字段最大限制" data-val-length-max="100"
                                                           data-val-regex="Email格式错误"
                                                           data-val-regex-pattern="^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$"
                                                           data-val-required="*" id="FirstMail"
                                                           name="Members[0].Email" type="text" value=""></div>
                <div class="col-xs-12 col-sm-12">
                  <div id="EmailTips" class="text-info" style="display: none">
                    <small>请填写有效的电子邮件，以便接收确认连结信件</small>
                  </div>
                </div>
                <div class="clearfix"></div><!-- Mibile Phone Number -->
                <div class="col-xs-12"><label for="">移动电话号码</label><span
                  class="field-validation-valid text-danger WordBreak" data-valmsg-for="Members[0].PhoneCountry"
                  data-valmsg-replace="true" style="display:none"></span><span
                  class="field-validation-valid text-danger WordBreak" data-valmsg-for="Members[0].PhoneCode"
                  data-valmsg-replace="true"></span></div>
                <div class="col-xs-4 col-sm-3 Reg-PhoneCountry"><input class="form-control Reg-PhoneCountry"
                                                                       data-val="true" data-val-length="文字长度超越字段最大限制"
                                                                       data-val-length-max="10" data-val-required="*"
                                                                       id="PhoneCountry"
                                                                       name="Members[0].PhoneCountry" type="text"
                                                                       value=""></div>
                <div class="col-xs-1 col-sm-1 Reg-PhoneSymbol">─</div>
                <div class="col-xs-7 col-sm-4 Reg-PhoneCode"><input class="form-control" data-val="true"
                                                                    data-val-length="文字长度超越字段最大限制"
                                                                    data-val-length-max="50" data-val-required="*"
                                                                    id="FirstPhoneCode" name="Members[0].PhoneCode"
                                                                    onkeyup="return ValidateNumber(this,this.value)"
                                                                    type="text" value=""></div>
                <div class="col-xs-12 col-sm-12">
                  <div id="PhoneCodeTips" class="text-info" style="display: none">
                    <small>请填写有效的手机电话号码作为接收出金授权码之用</small>
                  </div>
                </div>
                <div class="clearfix"></div><!-- Verification Code -->
                <div class="col-xs-12 col-sm-5"><label for="">验证码</label><span
                  class="field-validation-valid text-danger WordBreak" data-valmsg-for="VerificationCode"
                  data-valmsg-replace="true"></span>
                  <div class="input-group"><input class="form-control" data-val="true" data-val-required="*"
                                                  id="VerificationCode" maxlength="4" name="VerificationCode"
                                                  type="text" value=""><span
                    class="input-group-addon Reg-VerifyImg">
                    <img id="VerifyImg" src="./images/VerificationCode.gif">
                  </span>
                    <div class="input-group-btn">
                      <button type="button" id="VerifyReloadBtn" class="btn btn-info btn-md pull-right"><i
                        class="glyphicon glyphicon-refresh"></i></button>
                    </div>
                  </div>
                </div>
                <div class="clearfix"></div>
              </div>
              <input name="utm_source" type="hidden" value=""><input name="utm_medium" type="hidden" value=""><input
              name="utm_campaign" type="hidden" value=""><input name="utm_content" type="hidden" value=""><input
              name="utm_term" type="hidden" value="">                    <!-- Submit -->
              <div class="form-group">
                <button class="BtnSubmit btn btn-usgfx pull-right">下一步</button>
                <div class="clearfix"></div>
              </div>
              <!--</form>-->
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">

</script>

<style scoped>
  .forex_content{
    width: 1200px;
    margin:0 auto;
    background: #fff;
    margin-top: 50px;
    padding-bottom: 100px;
  }
  .StepImgs {
     margin: 0 auto;
     padding-bottom: 20px;
  }
  .form-control, .text-info {
    margin-bottom: 10px;
  }
  .Reg-VerifyImg img {
    height: 32px;
  }
  .input-group-addon{
    padding: 0px;
  }
  .Reg-Well {
    min-height: 20px;
    padding: 5px 10px;
    margin-bottom: 20px;
    background-color: #014c73;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
  }
  .forex_content .forex_border{
    width: 980px;
    margin-left: 55px;
    box-sizing: border-box;
    padding-right: 50px;
    border-right: 1px dashed #ccc;
  }
  .forex_content .forex_border ul li h1{
    font-size: 30px;
    color: #358ac7;
    margin-bottom: 50px;
    margin-top: 30px;
  }
</style>
